<template>
  <div>
    <p style="display: flex">
      <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pageInfo.size"
          :current-page="pageInfo.page"
          @current-change="list"
          :total="pageInfo.total">
      </el-pagination>
      <el-select v-model="pageInfo.size" placeholder="请选择"
                 @change="list(1)">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"

            :value="item.value">
        </el-option>
      </el-select>
    </p>
    <div>
      <el-input
          type="textarea"
          v-model="allResource"
          autosize>

      </el-input>
      <el-button @click="saveResourceConfig">
        保存配置
      </el-button>
    </div>
    <div>
      <el-table
          :data="pageInfo.list"
          style="width: 100%">
        <el-table-column
            prop="id"
            label="id"
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="page"
            label="页面"
            width="180">
        </el-table-column>
        <el-table-column
            prop="request"
            label="请求"
            width="180">
        </el-table-column>
        <el-table-column
            prop="parent"
            label="父id"
            width="180">
        </el-table-column>

      </el-table>
    </div>

  </div>
</template>

<script>
import {list, allResource, saveResourceConfig} from "@/network/resource";

export default {
  name: "resource",
  mounted() {
    this.list(1)
    this.loadAllResource();
  },
  data() {
    return {
      pageInfo: {
        page: 1,
        size: 5,
        list: [],
        total: 0,
      }, options: [
        {
          value: 1,
          label: 1
        },
        {
          value: 5,
          label: 5
        },
        {
          value: 10,
          label: 10
        },
        {
          value: 50,
          label: 50
        },],
      form: {},
      formLabelWidth: '120px',
      allResource: [],
    }
  },
  methods: {
    list(page) {
      let _this = this;
      console.log(page)
      if (page !== null && page !== undefined) {
        _this.pageInfo.page = page;
      }
      _this.pageInfo.list = null;
      list(_this.pageInfo).then(res => {
        _this.pageInfo = res.data;
      })
    },
    loadAllResource() {
      let _this = this;
      allResource().then(res => {
        _this.allResource = JSON.stringify(res.data, null, 2);
      })
    },
    saveResourceConfig() {
      let _this = this;
      let json = JSON.parse(_this.allResource);
      saveResourceConfig(json).then(res => {
        _this.$message.success("配置保存成功")
      })
    }
  }
}
</script>

<style scoped>

</style>
